<template>
  <div class="pagination">
    <el-pagination
      v-model:current-page="props.currentPage"
      v-model:page-size="props.pageSize"
      :page-sizes="[10, 30, 50]"
      layout="total, sizes, prev, pager, next"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

const props = defineProps({
  total: {
    type: Number,
    require: true,
    default: 100,
  },
  pageSize: {
    type: Number,
    require: true,
    default: 10,
  },
  currentPage: {
    type: Number,
    require: false,
    default: 1,
  },
})
const emit = defineEmits(['CurrentChange', 'SizeChange'])
const handleCurrentChange = (val: any) => {
  //   console.log(val);
  emit('CurrentChange', val)
}
const handleSizeChange = (val: any) => {
  //   console.log(val);
  emit('SizeChange', val)
}
</script>
<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
}
</style>
